<template>
  <!-- 举报与反馈 -->
  <Top-Page class="feedback-box">
    <NavBar title="意见反馈" leftArrow @click-left="navBack()" style="box-shadow: none; background-color: #efefef" />

    <!-- 反馈类型 -->
    <view class="feedback-type-box">
      <view class="feedback-type-text">反馈类型</view>

      <view class="feedback-type-list">
        <view
          v-for="(item, index) in typeList"
          :class="['feedback-type-item', { activity: index === activity }]"
          @click="activity = index"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 问题描述 -->
    <view class="describe-box">
      <view class="describe-title">问题描述</view>

      <view class="textarea-box">
        <textarea auto-height class="textarea" v-model="describe" :maxlength="180" placeholder="详细问题描述" />

        <view class="count">{{ describe.length }} / 180</view>
      </view>
    </view>

    <!-- 上传问题截图 -->
    <view class="upimage-box">
      <view class="upimage-title">上传问题截图</view>

      <view class="release__imgs">
        <view class="works-item" v-for="(item, index) in files">
          <video v-if="item.type === 'video'" class="works-item__image" :src="item.tempFilePath" mode="aspectFill" />

          <image
            v-else
            class="works-item__image"
            :src="item.path"
            mode="aspectFill"
            @click="handlePreviewImage(index)"
          />

          <view @click="handleRemoveFile(index)" class="close-css_icon"></view>
        </view>

        <!-- 选择图片 -->
        <view class="works-item cross-css_icon add-image" v-show="files.length < 9" @click="handleChooseFiles"></view>
      </view>
    </view>

    <view class="submit" @click="submit">提交</view>
  </Top-Page>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar.vue";
import { navBack } from "@/utils/utils.js";
import { chooseFilesImg, removeFile, uploadFiles, previewImage } from "@/utils/fileUtils.js";
export default {
  data() {
    return {
      navBack: navBack,
      describe: "",
      activity: 0,
      typeList: ["功能异常", "意见与建议", "举报"],
      files: [],
      CustomBar: this.CustomBar + "px",
    };
  },
  components: { NavBar },

  methods: {
    //提交反馈
    async submit() {
      uni.showToast({
        title: "提交中...",
        icon: "loading",
        mask: true,
        duration: 999999,
      });

      //发表的图片
      const responses = await this.handleUploadFiles();
      const files = [];

      responses.forEach((item) => {
        files.push(JSON.parse(item.data).data);
      });

      if (!this.describe) {
        uni.hideToast();

        uni.showToast({
          title: "问题描述不能为空",
          icon: "none",
        });
        return;
      }

      const data = {
        content: this.describe,
        type: this.typeList[this.activity],
        img: files,
      };

      this.$api.msgApi.feedback(data).then((res) => {
        uni.hideToast();
        console.log(res);
        if (res.code == 0) {
          uni.showToast({
            title: "反馈成功",
          });
          uni.navigateBack();
        }
      });
    },
    // 处理选择文件
    async handleChooseFiles() {
      try {
        this.files = await chooseFilesImg(this.files);
        console.log(this.files, "this.files");
      } catch (error) {
        console.error("选择文件失败:", error);
      }
    },
    // 处理删除文件
    handleRemoveFile(index) {
      this.files = removeFile(this.files, index);
    },
    // 处理上传文件
    async handleUploadFiles() {
      try {
        const uploadUrl = this.$api.msgApi.uploadImage; // 替换为你的上传接口地址
        const responses = await uploadFiles(this.files, uploadUrl);
        // console.log('上传成功:', responses);
        return responses;
      } catch (error) {
        // console.error('上传失败:', error);
        return "";
      }
    },
    // 处理图片预览
    handlePreviewImage(index) {
      previewImage(this.files, index);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #efefef;
}
.feedback-box {
  width: 100%;
  min-height: 100vh;
  padding: calc(var(--amplified_base) * 100rpx) 0;

  :deep .nav-bar {
    background-color: transparent;
  }

  //反馈类型
  .feedback-type-box {
    margin-top: calc(var(--amplified_base) * 36rpx);

    .feedback-type-text {
      font-weight: 500;
      font-size: calc(var(--amplified_base) * 32rpx);
      color: #333333;
      line-height: calc(var(--amplified_base) * 38rpx);
      padding: 20rpx 32rpx;
    }

    .feedback-type-list {
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      padding: 40rpx 32rpx 0 32rpx;

      .feedback-type-item {
        padding: 16rpx 24rpx;
        border-radius: 16rpx;
        background: #e6e6e6;
        margin-right: 32rpx;
        letter-spacing: 2rpx;
        font-weight: 400;
        font-size: calc(var(--amplified_base) * 28rpx);
        color: #6a6a6a;
        margin-bottom: 40rpx;
      }

      .activity {
        background: #1677ff;
        color: #ffffff;
      }
    }
  }

  //问题描述
  .describe-box {
    width: 100%;
    margin-top: calc(var(--amplified_base) * 20rpx);

    .describe-title {
      font-weight: 500;
      font-size: calc(var(--amplified_base) * 32rpx);
      color: #333333;
      line-height: calc(var(--amplified_base) * 38rpx);
      padding: 0 32rpx;
    }

    .textarea-box {
      position: relative;
      font-size: calc(var(--amplified_base) * 24rpx);

      .textarea {
        position: relative;
        margin-top: 20rpx;
        width: 100%;
        min-height: 200rpx;
        background-color: #fff;
        padding: calc(var(--amplified_base) * 32rpx);
      }

      .count {
        position: absolute;
        bottom: calc(var(--amplified_base) * 10rpx);
        right: 10rpx;
        font-weight: 400;
        font-size: calc(var(--amplified_base) * 28rpx);
        color: #808080;
        line-height: calc(var(--amplified_base) * 33rpx);
      }
    }
  }

  .upimage-box {
    margin-top: 20rpx;
    font-weight: 500;
    font-size: calc(var(--amplified_base) * 32rpx);
    color: #333333;

    .upimage-title {
      margin: 20rpx 0;
      padding: 0 32rpx;
    }

    //发表的图片信息
    .release__imgs {
      background-color: #fff;
      display: grid;
      gap: 16rpx; // 图片之间的间距
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(auto-fill, minmax(100px, auto)); /* 或设置固定高度 */

      //图片反显
      .works-item {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        overflow: hidden;
        margin: 40rpx 32rpx;

        .works-item__image {
          position: relative;
          width: 100%;
          height: 100%;
        }

        //删除图标
        .close-css_icon {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #f4f4f4;
          border-radius: 50%;

          &::before,
          &::after {
            width: 30rpx;
            height: 4rpx;
          }
        }
      }

      //添加图片
      .add-image {
        background: #f5f5f7;
      }

      .cross-css_icon::before,
      .cross-css_icon::after {
        background-color: #878787;
      }
    }
  }

  .submit {
    width: calc(var(--amplified_base) * 448rpx);
    max-width: 680rpx;
    height: calc(var(--amplified_base) * 90rpx);
    margin: 160rpx auto;
    background: #1677ff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-weight: 600;
    font-size: calc(var(--amplified_base) * 32rpx);
    color: #ffffff;
    line-height: calc(var(--amplified_base) * 90rpx);
    text-align: center;
  }
}
</style>
